<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.js"></script>
  <link href="https://cdn.bootcss.com/weui/2.1.2/style/weui.min.css" rel="stylesheet">
  <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <header class="nav">
    <i class="arrow-left"></i>
    <span>影片详情</span>
  </header>
  <div class="page">
    <!-- section1 -->
    <section class="movie-header">
      <div class="movie">
        <div class="movie-background"></div>
        <div class="movie-filter"></div>
        <div class="movie-container">
          <!-- pic -->
          <div class="movie-cover">
            <a href="#" class="link">
              <img src="" alt="" id="moviePic">
            </a>
          </div>
          <!-- detail -->
          <div class="movie-content">
            <div class="movie-name">
              <span></span>
            </div>
            <div class="movie-ename">
              <span>dadasda</span>
            </div>
            <!-- star -->
            <div class="movie-score">
              <div class="released-score">
                <div class="rating" id="rating">
                  <!-- <img src="./images/star.png" alt="">
                  <img src="./images/star.png" alt="">
                  <img src="./images/star.png" alt="">
                  <img src="./images/star.png" alt="">
                  <img src="./images/star-h.png" alt=""> -->
                  <span class="rating-score"></span>
                </div>
                <div class="score-num">
                  (<span>24356</span>人评分)
                </div>
              </div>
            </div>
            <div class="movie-detail">
              <p class="movie-type">
                <span>剧情</span>
                <img src="https://s0.meituan.net/bs/?f=myfe/canary:/asgard/images/movie/movie-tag-2DIMAX.png" alt="">
              </p>
              <p class="address-time">
                <span class="address">zhongguo</span>
                /
                <span class="time">155</span>
                分钟
              </p>
              <p class="date">2019</p>
            </div>
          </div>
        </div>
        <div class="operating flex">
          <div class="movie-watch flex1">
            <img src="./images/heart.png" alt="">
            <span>想看</span>
          </div>
          <div class="movie-mark flex1">
            <img src="./images/star2.png" alt="">
            <span>评分</span>
          </div>
        </div>
      </div>
    </section>
    <!-- section2 -->
    <section class="section-seperate section-expander">
      <div class="text-expander">
        <div class="text-expander__content close">
          <p>啊但卡就不第后林啊三vs成长协会成员提取物i一
            大步靠近第iahdojclmvposkvjphdhadiajo口红红男绿女的看
            啊但卡就不第后林啊三vs成长协会成员提取物i一
            大步靠近第iahdojclmvposkvjphdhadiajo口红红男绿女的看
            啊但卡就不第后林啊三vs成长协会成员提取物i一
            大步靠近第iahdojclmvposkvjphdhadiajo口红红男绿女的看</p>
        </div>
        <div class="text-expander__button">
          <i class="icon-shevron__down"></i>
        </div>
      </div>
    </section>
    <div id="toast">
      <div class="weui-mask_transparent"></div>
      <div class="weui-toast">
        <i class="weui-icon-success-no-circle weui-icon_toast"></i>
        <p class="weui-toast__content">已标记为想看</p>
      </div>
    </div>
  </div>
  <script>
    (function () {
      $.ajax({
        url: './mock.json',
        type: 'get',
        success: function (res) {
          console.log(res)
          $('#moviePic').attr('src', res.data.moviePic)
          $('.movie-name span').html(res.data.name)
          $('.movie-ename span').html(res.data.nameEnglish)
          $('.rating-score').html(res.data.grade)
          $('.score-num span').html(res.data.people)
          star(res.data.star)
          $('.address-time .address').html(res.data.where)
          $('.address-time .time').html(res.data.time)
          $('.movie-detail .date').html(res.data.date)
        }
      })

      function star(e) {
        let num = Math.floor(e)
        if (e > num) {
          $('#rating').prepend('<img src="./images/star-h.png" alt="">')
        }
        for (let i = 0; i < num; i++) {
          $('#rating').prepend('<img src="./images/star.png" alt="">')
        }
      }

      // 点击想看
      $('.movie-watch').click(function() {
        if ($(this).hasClass('active')) {
          $('.movie-watch').removeClass('active')
          $('.movie-watch img').attr('src', './images/heart.png')
          $('#toast .weui-toast__content').html('已取消想看')
        } else {
          $('.movie-watch').addClass('active')
          $('.movie-watch img').attr('src', './images/heart1.png')
          $('#toast .weui-toast__content').html('已标记为想看')
        }
        
        $('#toast').css('display', 'block')
        setTimeout(() => {
          $('#toast').css('display', 'none')
        }, 1500)
      })
      
      // 收放详情
      $('.text-expander').click(function() {
        if ($('.text-expander__content').hasClass('close')) {
          $('.text-expander__content').removeClass('close')
        } else {
          $('.text-expander__content').addClass('close')
        }
      })
    })()
  </script>
</body>

</html>